<template>
  <view class="withdrawal-detail">
    <view class="top">
      <image :src="wallertIcon" class="top-icon" />
      <view class="top-text">{{$t('withdrawal.yuEtXd')}}{{bankDeposit}}({{ bankNumber }})</view>
      <view class="top-text">{{ withdrawAmountStr }}</view>
    </view>

    <view class="content">
      <view class="content-left">{{$t('withdrawal.dangQianZt')}}</view>
      <view class="content-right">
        <u-steps :current="isCheck" direction="column" inactiveIcon="info-circle-fill" activeIcon="checkmark" activeColor="#fff" inactiveColor="#cccccc">
          <u-steps-item :title="$t('withdrawal.shenHeZ')" :desc="createTime" :iconSize="iconSize(0)">
          </u-steps-item>
          <u-steps-item :title="$t('withdrawal.buTongG')" :iconSize="iconSize(1)" v-if="isCheck ==1 && isCheckStr == $t('withdrawal.buTongG')">
          </u-steps-item>
          <u-steps-item :title="$t('withdrawal.shenHeTg')" :iconSize="iconSize(1)" v-else>
          </u-steps-item>
          <u-steps-item :title="$t('withdrawal.daoZhang')" :desc="updateTime" :iconSize="iconSize(2)">
          </u-steps-item>
        </u-steps>
      </view>
    </view>

    <view class="bottom">
      <view class="bottom-item">
        <view class="item-left">{{ $t('withdrawal.tiXianJe') }}:</view>
        <view class="item-right">¥{{ withdrawAmountStr }}</view>
      </view>
      <view class="bottom-item">
        <view class="item-left">{{ $t('withdrawal.fuWuF') }}:</view>
        <view class="item-right">¥{{ serviceChargeStr }}</view>
      </view>
      <view class="bottom-item">
        <view class="item-left">{{ $t('withdrawal.shenQingSj') }}:</view>
        <view class="item-right">{{ createTime }}</view>
      </view>
      <view class="bottom-item">
        <view class="item-left">{{ $t('withdrawal.daoZhangSj') }}:</view>
        <view class="item-right">{{ updateTime }}</view>
      </view>
      <view class="bottom-item">
        <view class="item-left">{{ $t('withdrawal.tiXianYh') }}:</view>
        <view class="item-right">{{ bankDeposit }}</view>
      </view>
      <view class="bottom-item">
        <view class="item-left">{{ $t('withdrawal.tiXianDh') }}:</view>
        <view class="item-right">{{ withdrawNumber }}</view>
      </view>
      <view class="bottom-item">
        <view class="item-left">{{ $t('withdrawal.qianBaoYe') }}:</view>
        <view class="item-right">¥{{ balanceStr }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 100,
      cardList: [],
      bankDeposit: "",
      bankNumber: "",
      withdrawAmountStr: 0,
      serviceChargeStr: 0,
      createTime: "",
      updateTime: "",
      withdrawNumber: "",
      isCheck: 0,
      isCheckStr: "",
      balanceStr: "",
      wallertIcon: "",
    };
  },
  onLoad(options) {
    this.wallertIcon = this.imgPath + "/images/icon/wallert_tx.png";
    if (options.orderNumber) {
      this.getDetail(options.orderNumber);
    }
    this.getUserCardList();
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("page.tiXianXq"),
    });
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
  },
  methods: {
    iconSize(num) {
      if (this.isCheck === num) {
        return 30;
      }
      return 15;
    },
    async getUserCardList() {
      const res = await this.$api.userCardList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      if (res.code === 0) {
        this.cardList = res.data.list;
      }
    },
    async getDetail(orderNumber) {
      const res = await this.$api.getUserWithdrawByOrderNumber({
        orderNumber: orderNumber,
      });
      if (res.code === 0) {
        this.bankDeposit = res.data.bankDeposit || "";
        this.bankNumber = res.data.bankNumber || "";
        this.withdrawAmountStr = res.data.withdrawAmountStr || 0;
        this.isCheck = res.data.isCheck;
        this.isCheckStr = res.data.isCheckStr || this.$t("withdrawal.tongGuo");
        this.serviceChargeStr = res.data.serviceChargeStr || 0;
        this.createTime = res.data.createTime;
        this.updateTime = res.data.updateTime || "";
        this.withdrawNumber = res.data.withdrawNumber || "";
        this.balanceStr = res.data.balanceStr || 0;
      }
    },
    toAddCard() {
      uni.navigateTo({ url: "/pages/add_card/add_card" });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f6 !important;
}
</style>
<style lang="scss" scoped>
/deep/ .u-steps {
  height: 240px;
  background-color: #fff;
  .u-text {
    flex: 0;
    padding-left: 30px;
    text {
      font-size: 16px !important;
    }
  }
  .uicon-checkmark {
    background-color: #75CECC;
    border-radius: 50% 50%;
    padding: 5px;
  }
  .u-steps-item__content {
    margin-left: 30px;
  }
}
.withdrawal-detail {
  margin: 20px auto 0;
  overflow: hidden;
  .top {
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    padding: 25px 0;
    background-color: #fff;
    .top-icon {
      width: 50px;
      height: 50px;
    }
    .top-text {
      color: #333;
      font-weight: bold;
      padding-top: 10px;
      font-size: 16px;
    }
  }
  .content {
    display: flex;
    overflow: hidden;
    padding: 30px 20px 0;
    background-color: #fff;
    .content-left {
      width: 30%;
      color: #999;
      text-align: center;
    }
  }
  .bottom {
    background-color: #fff;
    padding: 20px 0 40px;
    overflow: hidden;
    border-top: 1px solid #ddd;
    position: relative;
    top: -20px;
    .bottom-item {
      height: 35px;
      overflow: hidden;
      display: flex;
      padding: 0 40px;
      font-size: 14px;
      align-items: center;
      .item-left {
        color: #999;
        padding-right: 15px;
      }
      .item-right {
        font-size: 14px;
        color: #333;
      }
    }
  }
}
</style>
